import React, { useMemo } from 'react'
import DayBill from './DayBill'
import dayjs from 'dayjs'
import _ from 'lodash'

const DayBillList = ({ currentMonthBills }) => {
	const dayGroup = useMemo(() => {
		const groupData = _.groupBy(currentMonthBills, item => dayjs(item.date).format('YYYY-MM-DD'))
		const keys = Object.keys(groupData)
		return {
			groupData,
			keys
		}
	}, [currentMonthBills])

	return (
		<div style={{ marginTop: '0.5rem' }}>
			{
				dayGroup.keys.map(key =>
					<DayBill date={key} billsList={dayGroup.groupData[key]} key={key} />
				)
			}
		</div>
	)
}

export default DayBillList